import {NTag, NTooltip} from "naive-ui";
import {useUserInfoStore, useZhongzhiStore, useZhiyaoStore, useZhiqiStore,} from "#imports";
import {storeToRefs} from "pinia"

export default defineNuxtComponent({
    name: "修仙路",
    setup() {
        const userStore = useUserInfoStore();
        const zhongzhi = useZhongzhiStore()
        const zhiyao = useZhiyaoStore()
        const zhiqi = useZhiqiStore()
        const {userinfo, nextExp,lingshiNum,} = storeToRefs(userStore)
        const {skillName: zhongzhiName, skillInfo: zhongzhiInfo,} = storeToRefs(zhongzhi)
        const {skillName: zhiyaoName, skillInfo: zhiyaoInfo,} = storeToRefs(zhiyao)
        const {skillName: zhiqiName, skillInfo: zhiqiInfo,} = storeToRefs(zhiqi)
        return () => (<div class="p-2 bg-gray-50 border-b border-gray-200">
            <div class="flex justify-between items-center">
                <div class="flex items-center space-x-4">
                    <div>
                        <div class="font-bold">境界: {userinfo.value.name}</div>
                        <div class="text-sm text-gray-500">
                            等级: {userinfo.value.level}
                            <span>({nextExp?.value?.current}/{nextExp?.value?.all} 经验)</span>
                        </div>
                    </div>
                </div>
                <div class={"flex-center"}>
                    <span>灵石：</span>
                    <span>{lingshiNum.value}</span>
                </div>
                <div class="flex space-x-2">
                    <NTooltip trigger="hover">
                        {{
                            trigger: () => (
                                <NTag type="info" size="small">
                                    {zhongzhiName.value} Lv.{zhongzhiInfo.value.level}
                                </NTag>
                            ),
                            default: () => zhongzhiInfo.value.desc
                        }}
                    </NTooltip>
                    <NTooltip trigger="hover">
                        {{
                            trigger: () => (
                                <NTag type="info" size="small">
                                    {zhiyaoName.value} Lv.{zhiyaoInfo.value.level}
                                </NTag>
                            ),
                            default: () => zhiyaoInfo.value.desc
                        }}
                    </NTooltip>
                    <NTooltip trigger="hover">
                        {{
                            trigger: () => (
                                <NTag type="info" size="small">
                                    {zhiqiName.value} Lv.{zhiqiInfo.value.level}
                                </NTag>
                            ),
                            default: () => zhiqiInfo.value.desc
                        }}
                    </NTooltip>
                </div>
            </div>
        </div>)
    }
})